<template>
  <div class="ai-bg"></div>
  <div class="ai-text2">AI CHAT</div>
  <button @click="redirectToExternalSite" class="ai-text1">入口</button>
</template>

<script>
export default {
  methods: {
    redirectToExternalSite() {
      // 指定要打开的网站链接
      const url = 'http://192.168.4.124:3000/';
      // 使用 window.open() 在新窗口中打开链接
      window.open(url, '_blank');
    },
  }
}
</script>

<style scoped>
.ai-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-image: url(../../../public/img/bg/AIbac.png);
  background-size: cover;
  background-position: center top;
}

.ai-text1 {
  position: absolute;
  margin-left: 46%; /* 根据需要调整位置 */
  margin-top: 28%;
  border: none;
  background-color: transparent; /* 设置背景透明 */
  color: #000; /* 按钮文字颜色，根据需要调整 */
  padding: 10px 20px; /* 按钮内边距，根据需要调整 */
  font-size: 32px; /* 文字大小，根据需要调整 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */
}

.ai-text1::after {
  content: '→'; /* 箭头符号 &#x2192; */
  margin-left: 6px; /* 与文本之间的间距 */
  /* 您可以添加更多的样式来调整箭头的外观 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 1); /* 添加文字阴影 */
}

.ai-text2 {
  position: absolute;
  margin-left: 42.8%; /* 根据需要调整位置 */
  margin-top: 24%;
  border: none;
  background-color: transparent; /* 设置背景透明 */
  color: white; /* 按钮文字颜色，根据需要调整 */
  padding: 10px 20px; /* 按钮内边距，根据需要调整 */
  font-size: 52px; /* 文字大小，根据需要调整 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* 添加文字阴影 */
}

</style>